<template  >
    <div class="all">
        <!-- 页头 -->
        <el-container class="allContainer">
            <el-header class="head">
                <div class="divHead"></div>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <div>
                                <div class="topFont">客户跟进管理</div>
                            </div>
                        </div>
                    </el-col>
                    <!-- --------------------------------新增--------------------------- -->
                    <!-- --------------------------------新增--------------------------- -->
                    <div class="divBtn">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="followAdd = true">新增
                        </el-button>
                        <el-dialog id="el-dialogf1" title="客户跟进新增" :visible.sync="followAdd" width="40%"
                            @close="closeDialogAddgsVisible">
                            <div class="dialogAll">
                                <div class="left">
                                    <div class="rightFont">
                                        详细情况：
                                    </div>
                                    <div class="rightForm">
                                        <div class="followForm">
                                            <el-form :model="followForm" label-width="100px" size="mini">
                                                <el-form-item label="跟进人" :required="true"
                                                    style="width: 350px;padding-top: 20px;">
                                                    <el-input v-model="followForm.empName" placeholder="请输入跟进人"
                                                        :clearable="true">
                                                    </el-input>
                                                </el-form-item>
                                                <el-form-item label="沟通方式" :required="true" style="width: 350px;">
                                                    <el-select size="mini" v-model="followForm.followBy2"
                                                        placeholder="请选择">
                                                        <el-option v-for="item in followBy2s" :key="item.id"
                                                            :label="item.followBy2" :value="item.followBy2"
                                                            :clearable="true">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="跟进状态" :required="true" style="width: 350px;">
                                                    <el-select size="mini" v-model="followForm.followState"
                                                        placeholder="请选择">
                                                        <el-option v-for="item in followStates" :key="item.id"
                                                            :label="item.followState" :value="item.id"
                                                            :clearable="true">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="意向等级" :required="true" style="width: 350px;">
                                                    <el-select size="mini" v-model="followForm.customerDengji"
                                                        placeholder="请选择">
                                                        <el-option v-for="item in customerDengjis" :key="item.id"
                                                            :label="item.customerDengji" :value="item.customerDengji"
                                                            :clearable="true">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                                <el-form-item label="计划下次跟进时间" :required="true" style="width: 350px;">
                                                    <el-date-picker v-model="followForm.followTimes" type="datetime"
                                                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                                                        placeholder="选择日期时间">
                                                    </el-date-picker>
                                                </el-form-item>
                                                <el-form-item label="跟进内容" :required="true" style="width: 500px;">
                                                    <el-input type="textarea" :rows="5" placeholder="请输入内容"
                                                        v-model="followForm.followContent">
                                                    </el-input>
                                                </el-form-item>

                                            </el-form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div slot="footer" style="text-align: center;">
                                <el-button @click="followAdd = false">取 消</el-button>
                                <el-button type="primary" @click="add">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                </el-row>
            </el-header>
            <el-main class="bottomMain">
                <div class="divMain">
                    <template>
                        <!------------------------------------ 模糊查询 ------------------------------------>
                        <!------------------------------------ 模糊查询 ------------------------------------>
                        <div class="mainTopf1">
                            <div class="divInputAllf1">
                                <div class="divInputf1">
                                    <div class="inputFont">选择时间段：</div>
                                    <div style="float:left;">
                                        <el-date-picker v-model="queryFollow.dateRange" type="daterange"
                                            range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间">
                                        </el-date-picker>
                                    </div>
                                </div>
                                <!---------------------------- 查询重置按钮-------------------------- -->
                                <!---------------------------- 查询重置按钮-------------------------- -->
                                <div class="likeBtn">
                                    <el-button size="mini" type="success" icon="el-icon-search" @click="loadFollows">
                                        查询</el-button>
                                    <el-button size="mini" @click="allFollows" plain>重置</el-button>
                                </div>


                            </div>
                        </div>
                    </template>
                    <!-- 查所有 -->
                    <div class="divSelAll">
                        <template>
                            <el-table :data="followList" border style="width: 100%;font-size: xx-small;margin: auto;"
                                :row-style="{ height: '22px' }" :cell-style="{ padding: '1px' }">
                                <el-table-column fixed type="selection" prop="date" width="46">

                                </el-table-column>
                                <el-table-column fixed prop="followDatetime" label="跟进时间" width="150">
                                </el-table-column>
                                <el-table-column prop="followBy2" label="沟通方式" width="80">
                                </el-table-column>
                                <el-table-column prop="customerDengji" label="意向等级" width="80">
                                </el-table-column>
                                <el-table-column prop="empName" label="跟进人" width="80">
                                </el-table-column>
                                <el-table-column prop="followState" label="跟进状态" width="80">
                                </el-table-column>
                                <el-table-column prop="followContent" label="跟进内容" width="300">
                                </el-table-column>
                                <el-table-column prop="followTimes" label="计划下次跟进时间" width="150">
                                </el-table-column>

                                <el-table-column label="操作" width="194">
                                    <template slot-scope="scope">
                                        <!-- --------------------------------详情--------------------------- -->
                                        <!-- --------------------------------详情--------------------------- -->
                                        <el-button type="text" @click="handleClick(scope.row.followId)" size="small">
                                            详情
                                        </el-button>
                                        <el-dialog id="el-dialogf1" title="客户跟进详情"  :append-to-body="true" :visible.sync="followMesg" width="40%"
                                            @close="closeDialogAddgsVisible">
                                            <div class="dialogAll">
                                                <div class="left">
                                                    <div class="rightFont">
                                                        详细情况：
                                                    </div>
                                                    <div class="rightForm">
                                                        <div class="followForm">
                                                            <el-form :model="followForm" label-width="100px"
                                                                size="mini">
                                                                <el-form-item label="跟进人" :required="true"
                                                                    style="width: 350px;padding-top: 20px;">
                                                                    <el-input v-model="followForm.empName"
                                                                        placeholder="请输入跟进人" :disabled="true" :clearable="true">
                                                                    </el-input>
                                                                </el-form-item>
                                                                <el-form-item label="沟通方式" :required="true"
                                                                    style="width: 350px;">
                                                                    <el-select size="mini" :disabled="true"
                                                                        v-model="followForm.followBy2"
                                                                        placeholder="请选择">
                                                                        <el-option v-for="item in followBy2s"
                                                                            :key="item.id" :label="item.followBy2"
                                                                            :value="item.followBy2" :clearable="true">
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                                <el-form-item label="跟进状态" :required="true"
                                                                    style="width: 350px;">
                                                                    <el-select size="mini" :disabled="true"
                                                                        v-model="followForm.followState"
                                                                        placeholder="请选择">
                                                                        <el-option v-for="item in followStates"
                                                                            :key="item.id" :label="item.followState"
                                                                            :value="item.id" :clearable="true">
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                                <el-form-item label="意向等级" :required="true"
                                                                    style="width: 350px;">
                                                                    <el-select size="mini" :disabled="true"
                                                                        v-model="followForm.customerDengji"
                                                                        placeholder="请选择">
                                                                        <el-option v-for="item in customerDengjis"
                                                                            :key="item.id" :label="item.customerDengji"
                                                                            :value="item.customerDengji"
                                                                            :clearable="true">
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                                <el-form-item label="计划下次跟进时间" :required="true"
                                                                    style="width: 350px;">
                                                                    <el-date-picker v-model="followForm.followTimes"
                                                                        type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                                                        value-format="yyyy-MM-dd HH:mm:ss" :disabled="true"
                                                                        placeholder="选择日期时间">
                                                                    </el-date-picker>
                                                                </el-form-item>
                                                                <el-form-item label="跟进内容" :required="true"
                                                                    style="width: 500px;">
                                                                    <el-input type="textarea" :rows="5"
                                                                        placeholder="请输入内容" :disabled="true"
                                                                        v-model="followForm.followContent">
                                                                    </el-input>
                                                                </el-form-item>
                                                            </el-form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div slot="footer" style="text-align: center;">
                                                <el-button @click="followMesg = false">取 消</el-button>
                                            </div>
                                        </el-dialog>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>

                    <div class="divPage">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="queryFollow.currentPage" :page-sizes="[5, 10, 20, 50]"
                            :page-size="queryFollow.pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total">
                        </el-pagination>
                    </div>
                </div>
            </el-main>

        </el-container>

    </div>
</template>

<script>
import Cookie from "js-cookie"
export default {
    data() {
        return {
            followList: [],
            followStates: [{ id: 1, followState: "成交" }, { id: 2, followState: "意向" }, { id: 3, followState: "流失" }],
            customerDengjis: [{ id: 1, customerDengji: "高" }, { id: 2, customerDengji: "中" }, { id: 3, customerDengji: "低" }],
            followBy2s: [{ id: 1, followBy2: "电话" }, { id: 2, followBy2: "微信" }, { id: 3, followBy2: "面谈" }, { id: 4, followBy2: "邮件" }],
            followAdd: false,
            followMesg: false,
            customerName:"",
            followForm: {
                customerId: this.$route.query.customerId,
            },
            page: {
                total: 0//总条数
            },
            queryFollow: {
                currentPage: 1,//当前页
                pageSize: 5,//每页显示的条数
                dateRange: [],
                customerId: this.$route.query.customerId,
            },
        };

    },
    methods: {
        loadFollows() {
            this.$axios.post("follows", this.queryFollow)
                .then(res => {
                    this.followList = res.data.data.list.list;
                    this.page.total = res.data.data.list.total;
                    this.customerName = res.data.data.customerName;
                })
        },
        // 重置按钮
        allFollows() {
            this.queryFollow = {
                currentPage: 1,//当前页
                pageSize: 5,//每页显示的条数
                dateRange: [],
                customerId: this.$route.query.customerId,
            };
            this.loadFollows();
        },

        add() {
            this.$axios.post("follows/add", this.followForm)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("添加成功");
                        this.followAdd = false;
                        this.loadFollows();
                        this.closeDialogAddgsVisible();
                    } else {
                        this.$message.error("出错了！请稍后重试");
                    }
                })

        },
        // 详情按钮事件，根据客户id查找客户相关信息
        handleClick(id) {
            this.$axios.get("follows/" + id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.followMesg = true;
                        this.followForm = res.data.data.followVO;
                    } else {
                        this.$message.error("系统异常！请稍后重试");
                    }
                })
                .catch((error) => {
                    this.$message.error("系统异常！请稍后重试");
                });
        },

        //根据id删除客户信息
        delByid(id) {
            this.$axios.delete("follows/" + id)
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("删除成功");
                        this.loadFollows();
                    } else {
                        this.$message.error("系统异常！请稍后重试");
                    }
                })
                .catch((error) => {
                    this.$message.error("系统异常！请稍后重试,请稍后重试");
                });
        },

        //每一页显示的条数变化时，每页五条/每页十条
        handleSizeChange(val) {
            this.queryFollow.pageSize = val;
            this.loadFollows();
        },
        //当前页数变化时,上一页/下一页
        handleCurrentChange(val) {
            this.queryFollow.currentPage = val;
            this.loadFollows();
        },

        /**
         *关闭或取消模态框，清空asdsadad值
         */
        closeDialogAddgsVisible() {
            this.followForm = {//初始化from中的值
            }
        },
    },
    mounted() {
        this.loadFollows();
    },
};
</script>
<style scoped>
.all {
    width: 100%;
    height: 700px;
    font-size: 30px;
    background-color: rgb(240, 242, 245);
}

.allContainer {
    width: 98%;
    ;
    margin: auto;
}

.head {
    background-color: white;
    width: 100%;
    height: 10px;
    line-height: 60px;
    margin: auto;
    border-radius: 10px;
    margin-top: 5px;
}

.divHead {
    background-color: cornflowerblue;
    width: 7px;
    height: 50%;
    float: left;
    margin-top: 15px;
    border-radius: 2px;
    margin-left: 8px;
}

.topFont {
    float: left;
    margin-left: 18px;
    font-size: 14px;
    font-weight: 900;
}

.divBtn {
    float: right;
    margin-right: 10px;
}

.bottomMain {
    border-radius: 8px;
    width: 100%;
    height: 620px;
    margin: auto;
    margin-top: 5px;
}

.divMain {
    width: 100%;
    height: 100%;
}

.mainTopf1 {
    width: 100%;
    height: 75px;
    margin: auto;
    border: 1px solid darkgray;
    border-radius: 5px;
}

.divInputAllf1 {
    border: 0px solid red;
    background-color: white;
    width: 100%;
    height: 70px;
    line-height: 40px;
    margin: auto;
    border-radius: 10px;
    margin-top: 5px;
}

.divInputf1 {
    border: 0px solid red;
    width: 70%;
    height: 50%;
    line-height: 60px;
    margin-left: 20px;
    float: left;
}

.divSelect {
    border: 0px solid red;
    width: 24.9%;
    height: 50%;
    line-height: 60px;
    margin-left: 20px;
    float: left;
}

.divSelect1 {
    border: 0px solid red;
    width: 24.9%;
    height: 50%;
    line-height: 40px;
    margin-left: 20px;
    float: left;
}

.likeBtn {
    float: right;
    margin-right: 12px;
    line-height: 60px;
}

.inputFont {
    float: left;
    font-size: 2px;
    padding-top: 5px;
}

.optionFont {
    float: right;
    color: #8492a6;
    font-size: xx-small;
}

.divSelAll {
    width: 100%;
    height: 75%;
    margin-top: 8px;
    line-height: 20px;
}

.divPage {
    width: 100%;
    height: 2%;
    margin-top: 20px;
    line-height: 10px;
}

.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 54%;
    left: 57.5%;
    transform: translate(-50%, -50%);
    height: 700px;
    width: 600px;
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

.dialogAll {
    border: 0px solid red;
    width: 98%;
    height: 105%;
    margin: auto;
    margin-top: -30px;
}

.left {
    border: 0px solid red;
    width: 99%;
    height: 100%;
    float: left;

}

.right {
    border: 0px solid red;
    width: 50%;
    height: 100%;
    float: right;

}

.leftFont,
.rightFont {
    border: 0px solid red;
    width: 90%;
    height: 5%;
    line-height: 20px;
    text-align: left;
    font-weight: 500;
    font-family: "微软楷体";
    margin-left: 10px;
}

.leftForm,
.rightForm {
    border: 2px dashed #8492a6;
    border-radius: 10px;
    width: 99%;
    height: 94%;
    padding-top: 10px;
}

.visitorForm,
.carForm {
    border: 0px solid red;
    width: 90%;
    height: 95%;
    margin: auto;
    margin-top: 30px;
    margin-left: 35px;
}

.el-select {
    min-width: 250px;
}

.el-date-picker {
    min-width: 250px;
}
</style>
